<template>
  <div class="home">
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../assets/image/b1.webp">
          </div>
          <div class="swiper-slide">
            <img src="../assets/image/b2.webp">
          </div>
          <div class="swiper-slide">
            <img src="../assets/image/b3.webp">
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <el-button type="primary" @click="handleAlipay">支付宝支付</el-button>
    <div class="game-container">
      <div class="product-container" v-for="item in homeList" :key="item.name">
        <div class="title">{{ item.name }}</div>
        <div class="product-list">
          <div class="list-item" v-for="it in item.tgameList" :key="it.title" @click="goDetailPage(it, item.name)">
            <img :src="it.drawingUrl" />
            <div class="info">
              <p class="name">{{ it.title }}</p>
              <p class="rank">
                <span>评分：{{ Math.floor(Math.random() * 10 + 1) }}分</span>
                <span v-if="it.author">作者：{{ it.author }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getGameHomeList, alipay } from '../api/index'
const router = useRouter()
const homeList = ref([])
function goDetailPage({ id }, name) {
  router.push({
    path: `/detail/${id}?name=${name}`
  })
}
async function handleAlipay() {
  ElMessageBox.confirm(
    '确定要购买吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const res = await alipay({
        out_trade_no: `O${(new Date()).getTime()}`,
        subject: '游戏下单',
        body: '摩登游戏',
        total_amount: 200,
      })
      console.log('res: ', res)
      if (!res.code) {
        const div = document.createElement('div')
        div.innerHTML = res.msg // data就是接口返回的form 表单字符串
        document.body.appendChild(div)
        document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
        document.forms[0].submit()
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消购买',
      })
    })
}
onMounted(async () => {
  createSwiper()
  function createSwiper() {
    const script = document.createElement('script')
    script.src = 'https://mebstatic.bestwehotel.com/v/BundleFiles/swiper/swiper.min.4.5.1.js'
    document.head.appendChild(script)
    script.onload = () => {
      // console.log('加载好了', Swiper);
      var swiper = new Swiper('.swiper-container', {
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        speed: 700,
        allowTouchMove: false,
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 3,
        },
        centeredSlides: true,
        spaceBetween: 50,
        slidesOffsetBefore: 40,
        loop: true,
        slidesPerView: 'auto',
        on: {
          slideChangeTransitionEnd: function () {
            this.slides.transition(this.params.autoplay.delay + this.params.speed).transform('translate3d(-60px, 0, 0)');
          },
          slideChangeTransitionStart: function () {
            this.slides.transition(this.params.speed).transform('translate3d(0, 0, 0)');
          },
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<div class="' + className + '"><span></span><i></i></div>';
          },
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
      window.onresize = function () {
        swiper.update();
      }
    }
  }
  try {
    const res = await getGameHomeList()
    console.log('getGameHomeList: ', res)
    if (res.code === 0) {
      homeList.value = res.data || []
    }
  } catch (error) {
    console.log(error);
    ElMessage.error('网络异常，请稍后重试')
  }
})
</script>
<style lang="scss" scoped>
.game-container {
  padding: 20px;
  .title {
    font-size: 28px;
    color: #23272a;
    font-weight: 700;
  }
  .product-container {
    max-width: 1600px;
    width: 90%;
    margin: 20px auto;
  }
  .product-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    margin-bottom: 20px;
    .list-item {
      display: flex;
      flex-direction: column;
      width: 240px;
      margin-right: 15px;
      margin-bottom: 15px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 0 1px #ccc;
      padding-bottom: 10px;
      position: relative;
      top: 0;
      transition: top 0.5s;
      cursor: pointer;
      &:hover {
        top: -5px;
      }
      img {
        width: 240px;
        height: 300px;
        object-fit: cover;
        margin-bottom: 10px;
      }
      .info {
        padding: 0 8px;
        .rank {
          display: flex;
          span {
            flex: 1;
            white-space: nowrap;
          }
        }
        p {
          font-size: 12px;
          color: #666;
        }
        .name {
          margin-bottom: 5px;
          font-weight: 700;
          font-size: 14px;
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
 .swiper-container {
	    padding-bottom:40px;
    }
	.swiper-wrapper{
	}
    .swiper-slide {
	    width:1200px;
		  transition-timing-function:linear;
      margin: 20px auto;
    }
	.swiper-slide img{
		width:100%;
    height: 400px;
		border-radius: 4px;}
	.swiper-slide .title{
		position:absolute;
		transform:rotate(90deg);
		transform-origin:left top;
		left:-3px;
		font-size:11px;
		color: rgb(102, 102, 102);}	
    .swiper-button-next, .swiper-button-prev{
		width:43px;
		height:56px;
		background-size:43px 56px;
		margin-top:-56px;
		outline:none;}
	.swiper-button-next{
		background-image:url('~@/assets/image/banner/cursor-next.png');}
	.swiper-button-prev{
		background-image:url('~@/assets/image/banner/cursor-prev.png');}		
	.swiper-pagination-bullet{
		background:none;
		opacity:1;
		margin:0 6px !important;
		width:9px;
		height:9px;
		position:relative;
		outline:none;
		vertical-align:middle;}
	.swiper-pagination-bullet span{
		width:3px;
		height:3px;
		background:#CCC;
		display:block;
		border-radius:50%;
		margin-top:3px;
		margin-left:3px;
	}
	.swiper-pagination-bullet i{
		background:#000;
		height:1px;
		width:20px;
		position:absolute;
		top:4px;
		transform:scaleX(0);
		transform-origin:left;
		z-index:3;
		transition-timing-function:linear;
		}
	.swiper-pagination-bullet-active span,.swiper-pagination-bullet:hover span{
		width:9px;
		height:9px;
		margin-top:0;
		margin-left:0;
		background:#000;
		position:relative;
		z-index:1;
		}
	.swiper-pagination-bullet-active i{
		animation:middle 6s;
		}
	.swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i{
		animation:first 6s;
		}
	.swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i{
		animation:last 6s;
		}				
	@keyframes first{
	  0% {transform:scaleX(0.5);left:0px;}/*091*/
	  100% {transform:scaleX(1);left:2px;} /*0915*/
	}
	@keyframes last{
	  0% {transform:scaleX(0.7);left:-10px;}/*1090*/
	  20% {transform:scaleX(0.3);left:2px;} /*090*/
	  100% {transform:scaleX(0.3);left:0px;} /*090*/
	}		
	@keyframes middle{
	  0% {transform:scaleX(0.7);left:-10px;}/*1091*/
	  20% {transform:scaleX(0.45);left:2px;}/*092*/
	  100% {transform:scaleX(1);left:2px;} /*0913*/
	}	
.home {
  .banner {
    width: 1200px;
    margin: 20px auto;
  }
}
</style>
